<script>
import { ElMessage } from 'element-plus';
import dialog from '/@/mixins/dialog';
import PictureSelectorDialog from '/@/components/pictureSelector/PictureSelectorDialog.vue';
import { usePic } from './hook';
import { useArticleApi } from '/@/api/article';
import ArticleCateSelector from './ArticleCateSelector.vue';
import Editor from '/@/components/common/editor/Editor.vue';
import SinglePicSelector from '/@/components/pictureSelector/SinglePicSelector.vue';

const { addArticle, editArticle } = useArticleApi();

export default {
	name: 'AddDialog',
	mixins: [dialog],
	emits: ['update:modelValue', 'refresh'],
	components: { PictureSelectorDialog, ArticleCateSelector, Editor, SinglePicSelector },
	props: {
		isAdd: {
			type: Boolean,
			default: false,
		},
		cateType: {
			type: Number,
			default: 1,
		},
		itemInfo: {
			type: Object,
			default: () => {
				return {};
			},
		},
	},
	setup(props, { emit }) {
		const ruleForm = ref({});
		const open = () => {
			if (props.isAdd) {
				ruleForm.value = {
					score: 0,
					showStatus: 1,
					isShow: 0,
					descDetail: null,
				};
				// ruleForm.value = {};
			} else {
				//console.log("1111", props.itemInfo);
				ruleForm.value = { ...props.itemInfo };
			}
		};
		const dialogClosed = () => {
			formRef.value.resetFields();
		};
		const formRef = ref();
		const saveLoading = ref(false);
		const toSave = () => {
			try {
				formRef.value.validate(async (valid) => {
					if (!valid) return;
					saveLoading.value = true;
					let res = props.isAdd ? await addArticle(ruleForm.value) : await editArticle(ruleForm.value);
					saveLoading.value = false;
					if (res.code !== 200) return;
					emit('update:modelValue', false);
					ElMessage.success('保存成功！');
					emit('refresh');
				});
			} catch (error) {
				saveLoading.value = false;
			}
		};
		return {
			title: computed(() => (props.isAdd ? '新增' : '修改') + '文章'),
			ruleForm,
			rules: {
				catId: [{ required: true, trigger: 'change', message: '请输入文章分类' }],
				name: [{ required: true, trigger: 'blur', message: '请输入文章名称' }],
				descDetail: [{ required: true, trigger: 'change', message: '请输入文章详情' }],
			},
			open,
			dialogClosed,
			formRef,
			toSave,
			saveLoading,
			...usePic(ruleForm),
		};
	},
};
</script>
<template>
	<div class="AddDialog">
		<el-dialog
			:close-on-click-modal="closeOnClickModal"
			:title="title"
			:append-to-body="true"
			:destroy-on-close="true"
			v-model="visible"
			width="80vw"
			@open="open"
			@closed="dialogClosed"
		>
			<div class="form_wrap">
				<el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="110px">
					<el-form-item prop="catId" label="文章分类">
						<ArticleCateSelector v-model="ruleForm.catId" placeholder="请选择文章分类" />
					</el-form-item>
					<el-form-item prop="name" label="文章名称">
						<el-input maxlength="200" v-model="ruleForm.name" placeholder="请输入文章名称，不超过200个字符"></el-input>
					</el-form-item>
					<el-form-item prop="descText" label="摘要">
						<el-input
							show-word-limit
							maxlength="500"
							type="textarea"
							v-model="ruleForm.descText"
							placeholder="请输入摘要，不超过500个字符"
						></el-input>
					</el-form-item>
					<el-form-item prop="imgUrl" label="文章封面">
						<SinglePicSelector v-model="ruleForm.imgUrl" />
					</el-form-item>
					<el-form-item prop="descDetail" label="文章详情">
						<Editor v-model="ruleForm.descDetail" />
					</el-form-item>
					<el-form-item prop="score" label="排序">
						<el-input-number v-model="ruleForm.score" label="请输入数字，越大越排前"></el-input-number>
					</el-form-item>
					<el-form-item label="状态">
						<MySwitch v-model="ruleForm.showStatus" />
					</el-form-item>
					<el-form-item label="是否显示在底部">
						<MySwitch v-model="ruleForm.isShow" />
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="visible = false">取 消</el-button>
					<el-button type="primary" :loading="saveLoading" @click="toSave">保 存</el-button>
				</span>
			</template>
		</el-dialog>
		<PictureSelectorDialog v-model="isShowPicSelector" :maxLength="1" @submit="getPic" />
	</div>
</template>

<style lang="scss" scoped>
.AddDialog {
}
</style>
